<template>
    <div>
        <button @click="actorsBtn">查询所有演员</button>
        <hr>
        <button @click="listDirectors">查询所有导演</button>
        <hr>
        <div v-for="item in actorsList" :key="item.id" style="display: inline-block;">
            <div class="actorList">
                <img  :src="item.actor_avatar" alt="">
                <div class="actorName">{{item.actor_name}}</div>
            </div>
        </div>
        <hr>
        <div v-for="item in directorList" :key="item.id" style="display: inline-block;">
            <div class="actorList">
                <img  :src="item.director_avatar" alt="">
                <div class="actorName">{{item.director_name}}</div>
            </div>
        </div>
        <person name="lxx" avatar="https://p1.meituan.net/moviemachine/a248c1791723813602cadb36e5d3f44338652.jpg@128w_170h_1e_1c"></person>
        <abc name="zwh" avatar="https://p1.meituan.net/moviemachine/a248c1791723813602cadb36e5d3f44338652.jpg@128w_170h_1e_1c" ></abc>
        <counter  :step="2" :max="10" :min="0" >
            <span class="counterSum">12:</span>
            <span class="counterSum" slot="top">12:</span>
        </counter>
        <counter><!-- /吧内容放在子组件中，就会放入插槽中 -->
            <img src="../assets/logo.png" height="15px" alt="">:  
        </counter>
        <counter :value="1">
            <span slot="top">青菜</span>
            <span slot="bottom">baba</span>
        </counter>
    </div>
</template>

<script>
import Counter from '../components/counter.vue'
import Person from '../components/Person.vue'
import myaxios from '../http/MyAxios.js'
    export default {
  components: { Person,abc:Person, Counter,},
        data() {
            return {
                actorsList:'',
                directorList:'',
           }
        },
        methods: {
            // 获取演员列表按钮
            actorsBtn(){
                let url = 'https://web.codeboy.com/bmdapi/movie-actors'
                let params = {page:1,pagesize:10}
                myaxios.get(url,params).then(res=>{
                    console.log(res);
                    this.actorsList = res.data.data
                })
            },
            // 加载导演列表按钮
            listDirectors(){
                let url = 'https://web.codeboy.com/bmdapi/movie-directors'
                let params = {page:1,pagesize:10}
                myaxios.get(url,params).then(res=>{
                    this.directorList = res.data.data
                    console.log(res);
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .actorList{
        height: 160px;
        margin: 15px 10px;
        display: flex;
        flex-direction: column;
        .actorName{
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        img{
            width: 100px;
            display: flex;
        }
    }

</style>